<template>
  <div>
    <AddStudentInfo
      :flag="flag"
      @setFlag="setFlag"
      @addInfo="addInfo"
    ></AddStudentInfo>
  </div>
  <div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-button type="primary" @click="showDialog">新增学生</el-button>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <div class="filebtn">
          <el-button type="primary">批量新增</el-button>
          <input type="file" class="file" @change="change" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-button type="primary" @click="downStudentInfoModel"
          >学生信息模板下载</el-button
        >
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-button type="primary" @click="downData">导出请假数据</el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="list.data" style="width: 100%">
      <el-table-column prop="username" label="姓名" />
      <el-table-column prop="userpwd" label="密码" />
      <el-table-column fixed="right" label="状态">
        <template #default="scoped">
          <el-button type="danger" @click="delById(scoped.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { studentList, delStudent, userInsertMany } from "@/service/userService";
import { getGroupInfo } from "@/service/leaveService";
import { onMounted, ref } from "vue";
import AddStudentInfo from "@/components/student/AddStudentInfo.vue";
import { importsExcel, exportExcel } from "@/utils/excel.js";
import { ElMessage } from "element-plus";
let list = ref<any>({
  data: [],
});
let exportList = ref<any>([]);
onMounted(async () => {
  const { data } = await studentList();
  if (data.code == 200) {
    list.value.data = data.list;
  }
});
const flag = ref<boolean>(false);
let showDialog = () => {
  flag.value = true;
};
let setFlag = (value: boolean) => {
  flag.value = value;
};
let addInfo = (payload: any) => {
  list.value.data.push(payload);
};
let delById = async (info: any) => {
  const { data } = await delStudent({ userid: info._id });
  if (data.code == 200) {
    list.value.data.splice(
      list.value.data.findIndex((item: any) => item._id === info._id),
      1
    );
  }
};
let change = async (e: any) => {
  let data1 = await importsExcel(e); //获取excel的数据
  let { data } = await userInsertMany({
    list: data1,
  });

  if (data.code == 200) {
    //把数据放入
    list.value.data = [...list.value.data, ...data.data];
    ElMessage({
      message: "新增成功了哦~",
      type: "success",
    });
  } else {
    ElMessage({
      message: data.msg,
      type: "warning",
    });
  }
};
let downStudentInfoModel = () => {
  //下载
  setTimeout(() => {
    //模拟数据请求
    let url = "/api/file/学生信息模板.xlsx"; //需要下载
    //1
    window.location.href = url;
    //2 动态生成节点 然后去点击该节点
    // let a = document.createElement("a");
    // a.href = url;
    // a.click(); //让a标签点击一下
    // a.remove();
  }, 1);
};
//事件中使用
let downData = () => {
  //导出excel
  //需要把数据放到excel中去
  exportExcel(
    [
      { title: "姓名", dataIndex: "username", key: "username" },
      { title: "次数", dataIndex: "count", key: "count" },
    ],
    exportList.value,
    "2213班级请假数据.xlsx"
  );
};
onMounted(async () => {
  //生命周期钟请求
  let result = await getGroupInfo({ key: "username" });
  let list = result.data.result; //数据的集合
  // [{_id: '小雷1', count: 2},{_id: '小雷2', count: 2}]
  let dataX: any = [];
  let dataY: any = [];

  list.forEach((item: any) => {
    dataX.push(item["_id"]);
    dataY.push(item["count"]);
    exportList.value.push({
      username: item["_id"],
      count: item["count"],
    });
  });
});
</script>
<style scoped lang="less">
.filebtn {
  position: relative;
  left: 0;
}
.file {
  border: 1px solid red;
  z-index: 9999;
  opacity: 0;
  position: absolute;
  width: 60px;
  left: 0;
}
</style>
